<template>
  <el-tabs v-model="active" type="border-card" @tab-click="handleTabClick">
    <el-tab-pane
      v-for="tab in tabs"
      :key="tab.value"
      :name="tab.value"
      :label="tab.label"
      style="min-height: 420px"
    >
      <Player :video="video" class="player-wrapper" />
      <div class="export-row">
        <el-button @click="handleStartTime">设为开始时间</el-button>
        <el-button @click="handleEndTime">设为结束时间</el-button>
        <el-button @click="handleExport">导出</el-button>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { Player } from "@/components";
export default {
  name: "TabVideo",
  props: {
    video: {
      type: Object,
      default: () => {
        return {
          url: "",
          type: "",
          pic: ""
        };
      }
    }
  },
  components: {
    Player
  },
  data() {
    return {
      active: "1",
      tabs: [
        { label: "前", value: "1" },
        { label: "后", value: "2" },
        { label: "左", value: "3" },
        { label: "右", value: "4" },
        { label: "左前", value: "5" },
        { label: "左后", value: "6" },
        { label: "右前", value: "7" },
        { label: "右后", value: "8" }
      ]
    };
  },
  methods: {
    // 导出
    handleExport() {},
    // 切换视频
    handleTabClick() {
      console.log(this.active);
    },
    // 设为开始时间
    handleStartTime() {
      const videoEl = document.querySelector("video");
      if (videoEl) {
        const startTime = Math.floor(videoEl.currentTime);
        console.log(startTime);
      }
      debugger;
    },
    // 设为结束时间
    handleEndTime() {}
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.export-row {
  text-align: right;
}
.player-wrapper {
  min-height: 380px;
  margin-bottom: 10px;
  background: $black;
  box-sizing: border-box;
}
</style>
